<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { componentsMap, tabList } from './data/index';

const router = useRouter();
const route = useRoute();
const tabValue = ref('');

const initTabValue = () => {
  tabValue.value = (route.query as any).type || 'server';
};
const handleTabChange = (val: string) => {
  router.replace({ query: { type: val } });
};

onMounted(() => {
  initTabValue();
});
</script>

<template>
  <div ref="containerRef" class="common-container network-wrap" style="padding-left: 0; padding-right: 0">
    <tabs-view v-model="tabValue" :list="tabList" @change="handleTabChange"></tabs-view>
    <div class="component-wrap">
      <component :is="componentsMap[tabValue]"></component>
    </div>
  </div>
</template>

<style lang="less" scoped>
.network-wrap {
  padding-top: 42px;
  width: 100%;
  box-sizing: border-box;
}
:deep(.common-container) {
  padding-left: 0;
  padding-right: 0;
}
</style>
